<template>
    <view class="app">
        <load :ready="ready"></load>
		<view class="bank-list"> 
		
			<view class="item" :class="[{
				'item-zg': item.bankType == 1,
				'item-js': item.bankType == 2,
				'item-gs': item.bankType == 3,
				'item-yz': item.bankType == 4,
			}]" v-for="(item, index) in list" :key="item.id" @click="handleItem(item)">
				<view class="logo-desc">
					<!-- <image v-if="item.bankType == 1" src="/static/user/icon_bank1_w.png" class="logo" mode="widthFix"></image>
					<image v-if="item.bankType == 2" src="/static/user/icon_bank2_w.png" class="logo" mode="widthFix"></image>
					<image v-if="item.bankType == 3" src="/static/user/icon_bank4_w.png" class="logo" mode="widthFix"></image>
					<image v-if="item.bankType == 4" src="/static/user/icon_bank5_w.png" class="logo" mode="widthFix"></image> -->
					
					<image v-if="typeMap[item.bankType]" :src="typeMap[item.bankType].icon" class="logo" mode="widthFix"></image>
					
					<text>{{item.typeName}}</text>
				</view>		
				<view class="num">
					{{setCardNum(item.cardNumber)}}
				</view>	
			</view>	
			<!-- <view class="item item-ny" >
				<view class="logo-desc">
					<image src="/static/user/icon_bank1_w.png" class="logo" mode="widthFix"></image>
					<text>中国工商银行</text>
				</view>		
				<view class="num">
					2526 2626 2622 2626
				</view>	
			</view>	
			<view class="item " >
				<view class="logo-desc">
					<image src="/static/user/icon_bank1_w.png" class="logo" mode="widthFix"></image>
					<text>中国工商银行</text>
				</view>		
				<view class="num">
					2526 2626 2622 2626
				</view>	
			</view>	
			<view class="item item-js item-gs" >
				<view class="logo-desc">
					<image src="/static/user/icon_bank1_w.png" class="logo" mode="widthFix"></image>
					<text>中国工商银行</text>
				</view>		
				<view class="num">
					2526 2626 2622 2626
				</view>	
			</view>	
			<view class="item item-js item-yz" >
				<view class="logo-desc">
					<image src="/static/user/icon_bank1_w.png" class="logo" mode="widthFix"></image>
					<text>中国工商银行</text>
				</view>		
				<view class="num">
					2526 2626 2622 2626
				</view>	
			</view>	 -->
		</view>	
		
		
		<view class="btn-add" @click="link('./bank_form')">
			<u-icon name="plus-circle-fill" color="#A4A9B0" size="36"></u-icon>
			<text>添加银行卡</text>
		</view>
		
		<u-gap height="30"></u-gap>
			
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
        return {
			showCalendar:false,
			current: 0,
			showState:false,
			list:[],
			id:null,
			typeMap:{},
        };
    },
    onLoad() {
       this.getInit();
    },
    onReady() {
    },
    onShow() {
		this.getList();
    },
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		async getInit(){
			let res = await this.$api.bankType();
			if (res.data.code == this.$config.RESOK) {
				let typeMap  = {}
				res.data.data.forEach(item=>{
					typeMap[item.id] = item;
				})
				this.typeMap = typeMap
			} else {
				this.$message.error(res.data.msg);
			}
		},
		handleItem(item){
			uni.$emit('selectBank', item);
			this.$common.goback();
		},
		async getList(){
			let res = await this.$api.bankMessage();
			if (res.data.code == this.$config.RESOK) {
				this.list = res.data.data;
			} else {
				this.$message.error(res.data.msg);
			}
		},
		setCardNum(str){
			let res = '';
			let cur = 0;
			for(let i =0; i < str.length; i++){
				if( i%4 == 0 ){
					res+= ' '
				}
				res += str[i]
			}
			return res
		},
		handleTab(e){
			this.current = e;
		},
        submit() {
            console.log('submit')
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    console.log('验证通过');
                } else {
                    console.log('验证失败');
                }
            });
        },
        ...mapActions([])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: #f5f5f5;
}
.bank-list{
	padding: 0 30rpx 30rpx;
	.item{
		background: #B81C22;
		border-radius: 14px;
		padding: 36rpx;
		color: #fff;
		height: 200rpx;
		position: relative;
		margin-bottom: 20rpx;
		&.item-zg{
			background: #B81C22;
		}
		&.item-ny{
			background: #009882;
		}
		&.item-js{
			background: #06569F;
		}
		&.item-gs{
			background: #CF0106;
		}
		&.item-yz{
			background: #118A3F;
		}
	}
	.logo-desc{
		display: flex;
		margin-bottom: 20rpx;
		align-items: center;
		.logo{
			width: 22px;
			height: 22px;
		}
		text{
			font-size: 16px;
			font-weight: bold;
			margin-left: 5px;
		}
	}
}

.btn-add{
	border: 2px dashed #D8D8D8;
	border-radius: 10px;
	text-align: center;
	margin: 0 30rpx 30rpx;
	padding: 12px 0;
	text{
		margin-left: 5px;
		font-size: 16px;
		color: #A4A9B0;
	}
}
</style>


